import React from 'react';
import { YunxiaoIcon } from '@alife/devops-ui';
import './index.scss';
import intl from '../../locale';

const MessageBilling = ({ moment }) => {
  return (
    <React.Fragment>
      <div className="billingMessage">
        <YunxiaoIcon type="info-fill" style={{ color: '#1b9aee', marginRight: 8 }} />
        <div className="message-title">
          {intl.get({
            id: 'code-assets.components.billing.message.AdvancedFeaturesRemaining',
            defaultMessage: '高级功能剩余',
          })}
          {moment}
          {intl.get({ id: 'code-assets.components.billing.message.Day', defaultMessage: '天，' })}
          <a
            rel="noreferrer"
            target="_blank"
            href={`https://devops.aliyun.com/org-admin/${
              window.config && window.config.orgId
            }/profile?buy=true`}
          >
            {intl.get({
              id: 'code-assets.components.billing.message.Renew',
              defaultMessage: '前往续费',
            })}
          </a>
        </div>
      </div>
    </React.Fragment>
  );
};

export default MessageBilling;
